<template>
  <div class="report">
    <div class="emptyTop"></div>
    <div class="header">
      <!-- 两端对齐 -->
      <van-row class="headerAll" type="flex" justify="space-between" align="center">
        <van-col span="4" class="leftImg" @click="goBack()">
          <img src="http://job.dayinyun.com/back.png" alt />
        </van-col>
        <van-col span="16" justify="center" align="center" class="centerTitle">举报原因</van-col>
        <van-col span="4" justify="end" align="end" class="rightTitle" @click="goSubtitle()">提交</van-col>
      </van-row>
    </div>
    <div class="content">
         <div class="labeldiv">
             <label v-for="(item,index) in labeldata" :key="index" :class="{'active':item.active}" @click="checklabel(index)">{{item.name}}</label>
            
         </div>
         <div class="textareadiv">
             <textarea placeholder="填写举报理由,可提升举报成功率"></textarea>
         </div>
         <div class="picdiv" @click="upLoadBg">
             <img src="../assets/images/photo.png"/>
             <label>0/1</label>
         </div>
          <input type="file" ref="uploadBg" style="display: none" @change="uploadImg($event)" />
          <img v-for="(item,index) in headimgdata" :key="index" :src="item" class="reportimg"/>
    </div>
  </div>
  
</template>

<script>
import { GETTOKEN } from "../apis/mine";
import * as qiniu from "qiniu-js";
export default {
  data() {
    return {
        headimgdata:[],
        labeldata:[
            {name:"违法违禁",active:true},
            {name:"淫秽色情",active:false},
            {name:"烟酒驾驶",active:false},
            {name:"广告诈骗",active:false},
            {name:"淫秽色情",active:false},
            {name:"烟酒驾驶",active:false},
            {name:"录屏、盗播",active:false},
            {name:"侮辱谩骂",active:false},
            {name:"其他",active:false}
        ]
    }
  },
  methods: {
    // 返回
    goBack() {
      if (this.$systemInfo() === "android") {
        window.android.closeCurrentPage();
      } else if (this.$systemInfo() === "ios") {
        window.webkit.messageHandlers.closeCurrentPage.postMessage(null);
      }
    },
    checklabel(index){
        var that=this;
        var labeldata=that.labeldata;
        for(var i=0;i<labeldata.length;i++)
        {
            if(i==index){
                labeldata[i].active=true;
            }else{
                 labeldata[i].active=false;
            }
        }
        that.labeldata=labeldata;
    },
     // 上传图片
    upLoadBg() {
      this.$refs.uploadBg.click();
    },
    uploadImg(e) {
      // console.log(e);
      let that = this;
      let file = e.target.files[0];
      var uploadInit;
      let getToken = GETTOKEN;
      getToken().then(res => {
        // console.log(res)
        if (res.data.code * 1 == 200) {
          uploadInit = res.data.data;
          if (uploadInit == "") {
            return;
          }
          this.uploadDomain = "http://up-z1.qiniup.com/";
          let key = new Date().getTime() + file.name;
          let config = {
            chunkSize: 8,
            region: qiniu.region.z1,
            domain: this.uploadDomain
          };
          var putExtra = {
            ...config
          };
          // console.log(qiniu);

          let observable = qiniu.upload(
            file,
            key,
            uploadInit,
            putExtra,
            config
          );
          let subscription = observable.subscribe({
            next(res) {
              let process = res.total.percent;
              that.process = Math.floor(process);
            },
            error(err) {
              Toast.fail("上传失败：" + err.message);
            },
            complete(res) {
              var url="http://oss.dayinyun.com/" + res.key;
              that.headimgdata.push(url);
              console.log(that.headimgdata);
            }
          });
        }
      });
    },
  }
};
</script>

<style lang='less' scoped>
@import (reference) url(../assets/less/common);
.report {
  width: 100%;
  height: 1.38rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  .emptyTop {
    width: 100%;
    height: 0.5rem;
    background: #000000;
  }
  .header {
    width: 100%;
    height: 0.88rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    background: #000000;
    border-bottom: 0.02rem solid rgba(102, 102, 102, 0.4);
    margin-top: -0.02rem;
    .headerAll {
      width: 100%;
      height: 0.88rem;
      .leftImg {
        height: 0.28rem;
        img {
          width: 0.28rem;
          height: 0.28rem;
        }
      }
      .centerTitle {
        font-size: @fontSize40;
        font-family: @fontFamily400;
        font-weight: @fontWeight500;
        line-height: 0.4rem;
        color: #ffffff;
      }
      .rightTitle {
        font-size: @fontSize28;
        font-family: @fontFamily400;
        font-weight: @fontWeight400;
        line-height: 0.4rem;
        color: #ffffff;
      }
    }
  }
  .content
  {
      padding-top: 0.1rem;
      .labeldiv 
      {
          display: flex;
          flex-wrap: wrap;
          padding-left: 0.28rem;
          padding-right: 0.28rem;
          label{
            display: block;
            width: 2.1rem;
            height: 0.6rem;
            background: #232323;
            opacity: 1;
            border-radius: 0.06rem;
            color: #F5F5F5;
            font-size: 0.28rem;
            text-align: center;
            line-height: 0.6rem;
            margin-right:0.17rem;
            margin-top: 0.3rem;
            box-sizing: content-box;
            border: 0.02rem solid #232323;

          }
          .active{
              
                border: 0.02rem solid #FEE500;
                color: #FEE500;
          }
      }
      .textareadiv
      {
        width: 6.86rem;
        height: 1.76rem;
        border: 0.02rem solid #333333;
        opacity: 1;
        border-radius: 0.1rem;
        margin: 0 auto;
        margin-top: 0.3rem;
        textarea{
            width: 100%;
            height: 1.7rem;
            margin-top: 0.06rem;
            background: none;
            text-indent: 1em;
            color:#999999;
            font-size: 0.28rem;

        }
        
      }
      .picdiv{
            width: 1.2rem;
            height: 1.2rem;
            border: 0.02rem solid #333333;
            opacity: 1;
            border-radius: 0.1rem;
            margin-left: 0.3rem;
            margin-top: 0.3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                display: block;
                width: 0.38rem;
                height: 0.33rem;
            }
            label{
                display: block;
                color: #999999;
                font-size: 0.3rem;
                text-align: center;
                margin-top: 0.1rem;
            }
      }
      .reportimg
      {
          width: 2rem;
          height:2rem;
          object-fit: cover;
          margin-left: 0.3rem;
           margin-top: 0.2rem;
      }
  }
}
</style>
